<template>
  <div class="person">
    姓：<input type="text" v-model="firstName"><br>
    名：<input type="text" v-model="lastName"><br>
    全名:<span>{{fullName}}</span><br>
    <button @click="changeFullName">全名改为：li-si</button>
  </div>
</template>

<script setup lang="ts" name="Person">
    import {ref,computed} from 'vue'

    let firstName = ref('张')
    let lastName = ref('三')

    // 计算属性是只读的，不可修改
    // let fullName = computed(()=>{
    //     return firstName.value +'-'+ lastName.value;
    // })

    let fullName = computed({
        get(){
            return firstName.value +'-'+ lastName.value;
        },
        set(val){
            firstName.value = val.split('-')[0]
            lastName.value = val.split('-')[1]
        }
    })

    function changeFullName(){
        fullName.value = 'li-si'
    }

</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px
    }
    li{
        font-size: 20px;
    }
</style>